<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="a_count">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="d_count">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id="c_count">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id="dc_count">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <!-- 负责存放日文章新增趋势折线图 -->
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./js/http-myajax.js"></script>
    <script>
        $(function () {
            get_data();

            // 2.0 调用获取日文章新增趋势数据请求方法
            get_curve_show();
            // 3.0 调用方法渲染出饼状图
            get_pie_show();
            // pie_show(); 在get_pie_show()调用
            get_column_show()
        })

        // 1.0 获取4个数据
        function get_data() {
            myAjax('get', '/admin/data/info', null, function (resData) {
                /* resData格式：
                    {   
                        "totalArticle": 223,
                        "dayArticle": 18,
                        "totalComment": 7999,
                        "dayComment": 36
                    }
                */

                // 将数据一一赋值给页面对应的元素
                $('#a_count').html(resData.totalArticle);
                $('#d_count').html(resData.dayArticle);
                $('#c_count').html(resData.totalComment);
                $('#dc_count').html(resData.dayComment);
            })
        }
        function get_curve_show() {
            myAjax('get', '/admin/data/article', null, function (resData) {
                /* resData数据格式：
                {
                    date:[
                         {
                            "date": "2019-05-20",
                            "count": 23
                        }
                    ]
                }
                */
                //构造x轴的数据数组
                let xArrData = [];
                //    构造折线图需要的数组
                let data = [];
                //循环
                resData.date.forEach(item => {
                    xArrData.push(item.date);
                    data.push(item.count);
                })
                curve_show(xArrData, data)
            })
        }
        // 2.0 利用echarts实现文章新增趋势折线图
        function curve_show(xArrData, data) {
            // 1.0 初始化容器
            let charts = echarts.init(document.querySelector('#curve_show'));

            // 2.0 定义图表对应的参数
            // 此处实现的是折线图的配置
            let option = {
                // 1.0 设置图表标题
                title: {
                    text: '文章日新增趋势',
                    left: 'center'  // 设置标题居中显示
                },
                // 2.0 设置图表的X轴的数据
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xArrData,//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 设置x轴数据，此数据从服务器来
                },
                // 3.0 y轴的设置，固定写成type:value即可
                yAxis: {
                    type: 'value'
                },
                // 4.0 鼠标移动到轴上即出现提示面板
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                // 5.0 设置图表的类型和数据
                series: [{
                    data: data,//[820, 932, 901, 934, 1290, 1330, 1320], // 设置x轴数据，此数据从服务器来
                    type: 'line',  // 表示一个折线类型
                    // 5.0.1 设置折线的每一个数据显示
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    smooth: true,  // 6.0 将折线拐点变为圆角
                    // 7.0 设置折线面板的渐变
                    // itemStyle: {
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1,
                    //         [
                    //             { offset: 0, color: 'red' },                             
                    //             { offset: 1, color: 'blue' }
                    //         ]
                    //     )
                    // },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: .5, color: 'skyblue' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'yellow' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            }

            // 3.0 这是参数
            charts.setOption(option);

        }
        //获取文章分类的饼状的服务器的数据
        function get_pie_show() {
            myAjax('get', '/admin/data/category', null, function (resData) {
                // resDate的格式  
                /*
                 "code": 200,
                 "msg": "获取成功",
                 "date": [
                    {
                        "name": "爱旅行",
                        "articles": 41
                    },
                    // 转成 
                    {
                    "name": "爱旅行",
                    "value": 41
                },
                            */
                //加工resDate的数据
                let names = resData.date.map(item => item.name);
                let datas = resData.date.map(item => ({name:item.name,value:item.articles}))
                pie_show(names,datas)
            })
        }
        // 完成饼状的结构
        function pie_show(names,datas) {
            let charts = echarts.init(document.querySelector('#pie_show'));
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    left: 10,
                    data: names//['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        data: datas//[
                        //     { value: 335, name: '直接访问' },
                        //     { value: 310, name: '邮件营销' },
                        //     { value: 234, name: '联盟广告' },
                        //     { value: 135, name: '视频广告' },
                        //     { value: 1548, name: '搜索引擎' }
                        // ]
                    }
                ]
            };
            // 3.0 初始化参数并渲染饼图到指定容器中
            charts.setOption(option)
        }
        //完成柱状图
        function get_column_show() {
            myAjax('get','/admin/data/visit',null,function(resData) {
                // console.log(resData);
                //此处resDate的格式
                            /*{
                "code": 200,
                "msg": "日访问量统计数据获取成功",
                "data": {
                    "2019-05-28": 13016,
                    "2019-05-27": 11503,
                    "2019-05-26": 9128,
                    "2019-05-25": 13155,
                    "2019-05-24": 12734,
                    "2019-05-23": 10714,
                    "2019-05-22": 16282
                }
            }*/
            let data1 = [];
            let data2 = [];
            let data = resData.data;
            for(let key in data) {
                data1.push(key);
                data2.push(data[key])
                console.log(data);
            }   
            column_show(data1,data2);
            })
           
        }
        function column_show(data1,data2) {
            let charts = echarts.init(document.querySelector('#column_show'));
            let option = {
                 xAxis: {
                     type: 'category',
                     data:data1// ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                 },
                 yAxis: {
                     type: 'value'
                 },
                 series: [{
                     data: data2,//[120, 200, 150, 80, 70, 110, 130],
                     type: 'bar',
                     barWidth: 50,
                     showBackground: true,
                     itemStyle: {
                        color: "rgba(21, 196, 222, 1)"
                    },
                     backgroundStyle: {
                         color: 'rgba(220, 220, 220, 0.8)'
                     }
                 }]
}               
 // 3.0 设置参数
 charts.setOption(option);
        }
   </script>
</body>

</html>